import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { AlarmComponent } from './alarm/alarm.component';
import { RemovableComponent } from './removable/removable.component';
import { CheckableComponent } from 'cxd/showcase/tag/checkable/checkable.component';

export const TagConfig = {
  location: 'Tag',
  description: `标签是带删除标记的文本，常用于添加资源或者记录已选择的资源。`,
  description_en: `A tag is a text with a delete tag that is often used to add resources or record selected resources.`,
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/tag/demo1/demo1.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic',
      demoDescription: '基础用法。',
      demoDescription_en: 'Basic usage.',
    },
    {
      demo: RemovableComponent,
      codePath: 'showcase/tag/removable/removable.component',
      demoTitle: '可移除标签',
      demoTitle_en: 'Removable Tag',
      demoDescription: '可移除标签。',
      demoDescription_en: 'Removable Tag.',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/tag/demo2/demo2.component',
      demoTitle: '自定义模板',
      demoTitle_en: 'Custom Template',
      demoDescription: '自定义模板。',
      demoDescription_en: 'Custom template.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/tag/demo3/demo3.component',
      demoTitle: '回调',
      demoTitle_en: 'Callback',
      demoDescription: '回调。',
      demoDescription_en: 'Callback.',
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/tag/demo4/demo4.component',
      demoTitle: '扩展内容',
      demoTitle_en: 'Extended Content',
      demoDescription: '可在标签的最后通过模板自定义扩展内容。',
      demoDescription_en: 'You can customize the extension content in the template at the end of the tag list.',
    },
    {
      demo: CheckableComponent,
      codePath: 'showcase/tag/checkable/checkable.component',
      demoTitle: '可选中标签',
      demoTitle_en: 'Checkable Tag',
      demoDescription: '标签可以处于选中状态，如对筛选条件进行修改。',
      demoDescription_en: 'Tag can be checked, such as to modify the filter conditions.',
    },
    {
      demo: AlarmComponent,
      codePath: 'showcase/tag/alarm/alarm.component',
      demoTitle: '纯文本告警标签',
      demoTitle_en: 'Plain text warning labels',
      demoDescription: '纯文本告警标签适用于卡片场景',
      demoDescription_en: 'Plain text warning labels are suitable for card scenarios',
    },
  ],
  useRule: [],
  useSuggestion: [],
  mApi: [
    {
      name: 'lv-tag',
      name_en: 'lv-tag',
      selector: 'lv-tag',
      snippet: `<lv-tag [(ngModel)]='\${1:data}'></lv-tag>`,
      api: [
        {
          attribute: 'ngModel',
          type: 'TagItem[]',
          default: '',
          description: `标签的数据，可双向绑定，类型为TagItem数组，其中TagItem属性如下：
            <ul>
              <li>[label: any] 标签内容 (必选)</li>
              <li>[value: string] 标签唯一标识，如果设置了lvCheckable则为必选 (可选)</li>
              <li>[disabled: boolean] 是否禁用 (可选)</li>
              <li>[removable: boolean] 是否支持移除 (可选)</li>
            </ul>
            `,
          description_en: `Tag's data, double binding, the type of which is TagItem array, the properties of TagItem are as follows:
            <ul>
              <li>[label: any] Tag's content (required)</li>
              <li>[value: string] The unique identifier of the tag, it is required if lvCheckable is set. (optional)</li>
              <li>[disabled: boolean] Whether disabled tag (optional)</li>
              <li>[removable: boolean] Whether to support remove (optional)</li>
            </ul>
			    `,
        },
        {
          attribute: 'lvMaxWidth',
          type: 'string | number',
          default: '200px',
          description: `tag的最大显示宽度。`,
          description_en: `Tag max display width.`,
        },
        {
          attribute: 'lvShowClearAll',
          type: 'boolean',
          default: 'false',
          description: `是否支持清除所有。`,
          description_en: `Whether to support clearing all.`,
        },
        {
          attribute: 'lvTagTemplate',
          type: 'TemplateRef<{$implicit: any}>',
          default: '',
          description: `自定义模板。`,
          description_en: `Custom tag template.`,
        },
        {
          attribute: 'lvExtraContent',
          type: 'TemplateRef<{$implicit: TagItem[]}>',
          default: '',
          description: `扩展内容。`,
          description_en: `Extended Content.`,
        },
        {
          attribute: 'lvAlarmStatus',
          type: `'critical' | 'major' | 'minor' | 'warning' | 'customize'`,
          default: '',
          description: `纯文本告警标签状态`,
          description_en: `Plain Text Alarm Tag Status`,
        },
        {
          attribute: 'lvTrackBy',
          type: 'TrackByFunction<any>',
          default: '',
          description: `trackBy函数，防止数据更新导致所有DOM重新渲染`,
          description_en: `trackBy function to prevent data updates from causing all DOM to be re-rendered`,
        },
        {
          attribute: 'lvBeforeRemove',
          type: '(value: TagItem) => TagEventOutput',
          default: '',
          description: `删除单个tag前回调，返回false时阻止删除。`,
          description_en: `Delete a single tag before the callback, return false to prevent deletion.`,
        },
        {
          attribute: 'lvBeforeClearAll',
          type: '(value: TagItem[]) => TagEventOutput',
          default: '',
          description: `删除所有前回调，返回false时阻止删除。`,
          description_en: `Delete all previous callbacks, prevent deletion when returning false.`,
        },
        {
          attribute: 'lvCheckable',
          type: 'boolean',
          default: 'false',
          description: `是否支持选中。`,
          description_en: `Whether to support check.`,
        },
        {
          attribute: 'lvChecked',
          type: 'TagItem[]',
          default: '',
          description: `选中项，可双向绑定，仅在设置了lvCheckable为true时生效。`,
          description_en: `Checked Items, double binding, it only takes effect when lvCheckable is set to true.`,
        },
      ],
      event: [
        {
          event: 'lvClearAll',
          parameter: ``,
          description: '清除所有回调。',
          description_en: `Clear all callbacks.`,
        },
        {
          event: 'lvRemove',
          parameter: ``,
          description: '清除单个回调。',
          description_en: `Clear single callback.`,
        },
        {
          event: 'lvCheckChange',
          parameter: ``,
          description: '选中回调，仅在设置了lvCheckable为true时生效。',
          description_en: `Check callback， it only takes effect when lvCheckable is set to true.`,
        },
      ],
    },
  ],
};
